import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/home/model/xin_he_goods_item_entity.dart';
import 'package:xin_he/utils/xin_he_image.dart';

import '../../../routes/xin_he_routes.dart';
import '../../../utils/xh_styles.dart';
import '../../shopping_car/models/xin_he_goods_model.dart';
import '../views/xin_he_goods_grid_widget.dart';
import 'xin_he_search_logic.dart';

class XinHeSearchPage extends StatelessWidget {
  XinHeSearchPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeSearchLogic());
  final state = Get.find<XinHeSearchLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('搜索',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Obx(() => Column(
        // padding: EdgeInsets.zero,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          ///search
          Container(
            padding: EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 12),
            height: 35+22,
            color: Colors.white,
            child: Container(
                width: Get.width - 30,
                decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
                alignment: Alignment.center,
                child:Row(children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 10,right: 5),
                    child: XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
                  ),

                  Expanded(
                    child: TextField(
                      controller: logic.editingController,
                      onChanged: (value){
                        logic.inputChange(value);
                      },
                      onSubmitted: (value){
                        logic.onInputSubmitAction();
                      },

                      onEditingComplete: logic.onInputEditCompleteAction,
                      maxLines: 1,
                      // maxLength: 15,
                      style:   TextStyle(fontSize: 14,color: XinHeColor('#15161F')),
                      decoration:  InputDecoration(
                          hintText:  '请输入商品名',
                          hintStyle: TextStyle(fontSize: 14,color: XinHeColor('#B1B1B1') ),
                          filled: true,
                          fillColor:  XinHeColor('#F7F8F9'),
                          border: const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          enabledBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          focusedBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          disabledBorder:  const OutlineInputBorder(
                            // borderRadius: BorderRadius.all(Radius.circular(8)),
                            borderSide:  BorderSide(color: Colors.transparent),
                          ),
                          contentPadding: const EdgeInsets.only(top: 0,bottom: 0,left: 0,right: 15)
                      ),
                      // inputFormatters: [LengthLimitingTextInputFormatter(15)],
                    ),
                  ),

                  ///一键清除文本
                  state.isShowDelete.value
                      ? GestureDetector(
                    onTap: (){
                      logic.clearInputContent();
                    },
                    child: Container(
                      // padding: EdgeInsets.all(3),
                      margin: const EdgeInsets.only(left: 8),
                      height: 20,
                      width: 20,
                      child: const XinHeAssetImage('assets/images/home/input_delete.png',width: 20,height: 20,fit: BoxFit.fill,),

                    ),
                  )
                      :Container(),

                  GestureDetector(
                    onTap: (){
                      logic.onInputEditCompleteAction();
                    },
                    child: Container(
                      width: 54,
                      height: 33,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.5),
                      ),
                      child:  Text('搜索',style: TextStyle(color: XinHeStyle.mainGreenColor,fontSize: 14,fontWeight: FontWeight.w500),),
                    ),
                  ),
                ],)
              // Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
            ),

          ),

          state.isShowResultPage.value
              ?Expanded(child: _bottomItemListView())
              :(state.historyList.isNotEmpty
                 ? Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [

                /// 最近搜索
                Padding(
                  padding: const EdgeInsets.only(top:8,bottom: 8),
                  child: Row(
                    children:  [
                      SizedBox(
                          height: 21,
                          child: Text('最近搜索',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w600),)),
                      const Spacer(),
                      GestureDetector(
                        onTap: (){
                          // logic.clearInputContent();
                          logic.onClearHistory();
                        },
                        child: const SizedBox(
                            width: 16,
                            child:  XinHeAssetImage('assets/images/home/search_delete.png',width: 16,height: 16,fit: BoxFit.fill,)),
                      )
                    ],
                  ),
                ),

                // ///分割线
                // Container(
                //   height: 1,
                //   color: XinHeColor('#F4F5F6'),
                // ),

                const SizedBox(height: 5,),
                ///items列表
                Wrap(
                  spacing:8 ,
                  runSpacing: 8,
                  children: _getItemsList(state.historyList.reversed.toList()),
                )
              ],
            ),
          )
                 :Container()
                )

        ],)),
    );
  }


  ///历史记录数据列表
  List<Widget> _getItemsList(List items) {
    List<Widget> list = [];
    List titles = items;
    for(var i in titles){
      list.add(_itemView(i));
    }
    return list;
  }

  ///历史记录标签
  Widget _itemView(String text) {

    return  GestureDetector(
      onTap: (){
        logic.onSelectedItem(text);
      },
      child: Container(
          height: 25,
          padding: const EdgeInsets.symmetric(horizontal: 12,vertical: 7),
          decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(12.5)),
              color: XinHeColor('#EEF3F4')
          ),
          child: Container(
            // color: Colors.blue,
              height: 12,
              child: Text(text,
                style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 12),
                strutStyle: const StrutStyle(
                    leading: 0,
                    fontSize: 12,
                    height: 1.1,
                    forceStrutHeight: true
                ),
              )
          )
      ),
    );
  }

  Widget _bottomItemListView(){
    return Container(
      width: Get.width-0,
      padding: const EdgeInsets.only(left: 15,right: 15),
      child: state.resultList.isNotEmpty? GridView.builder(
        // shrinkWrap: true,
        // physics: const NeverScrollableScrollPhysics(),
        padding: const EdgeInsets.symmetric(horizontal: 0),
        scrollDirection: Axis.vertical,
        gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 9.5,
            crossAxisSpacing: 10.5,
            childAspectRatio: 167.5/255.5
        ),
        itemBuilder: (ctx,index){
          XinHeGoodsItemEntity model = state.resultList[index];
          return GestureDetector(
            onTap: (){
              Get.toNamed(XinHeRoutes.goodsDetail);
            },
            child: XinHeGoodsGridWidget(model: model,onTapCallback: (){
              logic.addGoodsToCartAction(XinHeGoodsModel());
            },),
          );
        },
        itemCount: state.resultList.length,
      ):Center(child: Text('暂无数据')),
    );
  }

}
